import {Fragment, useState} from 'react';
import {Button, Col, Form, Input, Modal, notification, Popconfirm, Row, Select, Table,} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import EditContact from './EditContact';
import {deleteCommandGroupContact, getCommandGroupList,} from '@/services/emergency';
import useSearchTable from "@/hooks/useSearchTable";
import {ConcactTypeMap} from "@/enums/emergency/map";

const CommandGroup: React.FC = ({dispatch, ...props}: any) => {
  const [form] = Form.useForm();
  const [editContact, setEditContact] = useState<any>({
    visible: false,
    planId: null,
  });
  const openEditContact = (concactId?: any, info?: any) => {
    setEditContact({
      ...editContact,
      planId: props.planId,
      concactId,
      info,
      visible: true,
    });
  };
  const closeEditContact = () => {
    setEditContact({
      ...editContact,
      planId: null,
      visible: false,
    });
  };
  const doDelete = async (id: any) => {
    await deleteCommandGroupContact({id});
    notification.success({
      message: '删除联系人成功！'
    });
    refresh();
  };
  const {
    refresh,
    getOrder,
    tableProps
  } = useSearchTable((params: any) => {
    return getCommandGroupList(params)
  }, form)
  return (
    <Fragment>
      <Modal {...props} onCancel={() => {
        dispatch({
          clear: true,
          open: false
        })
      }} footer={null}>
        <Form form={form}>
          <Row gutter={24}>
            <Col span={8}>
              <Form.Item label="联系人" name="name">
                <Input></Input>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item label="职务" name="title">
                <Select
                  placeholder="请选择"
                  allowClear
                  options={ConcactTypeMap.toOption()}
                ></Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item>
                <Button
                  type="primary"
                  onClick={() => {
                    refresh()
                  }}
                  style={{marginRight: '10px'}}
                >
                  搜索
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <div style={{marginBottom: '10px'}}>
          <Button
            type="primary"
            icon={<PlusOutlined/>}
            onClick={() => {
              openEditContact();
            }}
          >
            新增
          </Button>
        </div>
        <Table
          size="small"
          {...tableProps}
          columns={[
            {
              title: '序号',
              width: 50,
              render: (_: any, __: any, index: number) => getOrder(index)
            },
            {
              title: '姓名',
              dataIndex: 'name',
              key: 'name',
            },
            {
              title: '所属单位',
              dataIndex: 'depart',
              key: 'depart',
            },
            {
              title: '职务',
              dataIndex: 'title',
              key: 'title',
              width: 100,
              render(data) {
                return ConcactTypeMap.getName(data);
              },
            },
            {
              title: '手机',
              dataIndex: 'mobile',
              key: 'mobile',
            },
            {
              title: '办公室电话',
              dataIndex: 'telephone',
              key: 'telephone',
            },
            {
              title: '操作',
              width: 100,
              render(text, record) {
                return (
                  <div>
                    <Button
                      type='link'
                      style={{marginLeft: 0}}
                      onClick={() => {
                        openEditContact(text.id, record);
                      }}
                    >
                      修改
                    </Button>
                    <Popconfirm
                      title="确定要删除该联系人吗？"
                      okText="确定"
                      cancelText="取消"
                      overlayStyle={{width: '200px'}}
                      onConfirm={() => {
                        doDelete(text.id);
                      }}
                    >
                      <Button type='link' style={{marginLeft: 0}}>删除</Button>
                    </Popconfirm>
                  </div>
                );
              },
            },
          ]}
        />
      </Modal>
      <EditContact
        {...editContact}
        onCancel={closeEditContact}
        onSuccess={() => {
          refresh()
        }}
        width={500}
      />
    </Fragment>
  );
}

export default CommandGroup;
